<template>
  <div class="container" style="height: 100%">
    <div class="flex_cm" style="height: 100%">
      <search
        :form_data="header_list"
        @changeIsShow="
          (e) => {
            header_list[e].isShow = !header_list[e].isShow
          }
        "
        @search="search_key"
        @reset="
          header_list.forEach((item) => {
            item.value = ''
          }),
            search_key()
        "
      ></search>
      <div class="p_0_10 bg_fff flex1">
        <div class="flex_js p_10_0">
          <div class="c_666 fw">企业项目列表</div>
          <div class="flex">
            <el-button
              type="primary"
              @click="show_box = true"
              v-if="has_role_list[3].has_role"
              >新增</el-button
            >
            <setTable
              :data="header_list"
              :height_size="height_size"
              @changeShowTable="
                (e) => {
                  header_list[e].showTable = !header_list[e].showTable
                }
              "
              @resetTableSet="
                () => {
                  header_list.forEach((item) => {
                    item.showTable = true
                  })
                }
              "
              @changeHeightSize="
                (e) => {
                  height_size = e
                }
              "
            ></setTable>
          </div>
        </div>
        <el-table
          style="text-align: center"
          :data="list"
          :max-height="max_height"
          border
          highlight-current-row
          v-loading="loading"
          :default-sort="{ prop: 'name', order: '' }"
          :row-style="{
            height: height_size == 2 ? '50px' : '',
          }"
          :cell-style="{
            padding: height_size == 3 ? '0' : '',
          }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80px"
          ></el-table-column>
          <el-table-column
            label="项目名称"
            prop="name"
            sortable
            key="项目名称"
            v-if="header_list[0].showTable"
          ></el-table-column>
          <el-table-column
            label="代号"
            prop="code"
            sortable
            key="代号"
            v-if="header_list[1].showTable"
          ></el-table-column>
          <el-table-column
            label="设计单位"
            key="设计单位"
            sortable
            prop="designCustomer.name"
            width="120px"
            v-if="header_list[2].showTable"
          >
            <template #default="scope: any">{{
              scope.row.designCustomer?.name
            }}</template>
          </el-table-column>
          <el-table-column
            label="建设单位"
            key="建设单位"
            sortable
            prop="contractorCustomer.name"
            width="120px"
            v-if="header_list[3].showTable"
            ><template #default="scope: any">{{
              scope.row.contractorCustomer?.name
            }}</template></el-table-column
          >
          <el-table-column
            label="施工单位"
            key="施工单位"
            sortable
            prop="constructionCustomer.name"
            width="120px"
            v-if="header_list[4].showTable"
            ><template #default="scope: any">{{
              scope.row.constructionCustomer?.name
            }}</template></el-table-column
          >
          <el-table-column
            label="项目状态"
            key="项目状态"
            sortable
            prop="status"
            v-if="header_list[5].showTable"
          >
            <template #default="scope: any">
              <div v-if="scope.row.status == 1">进行中</div>
              <div v-if="scope.row.status == 2">已完成</div>
              <div v-if="scope.row.status == 3">已暂停</div>
            </template>
          </el-table-column>
          <el-table-column
            label="当前进度"
            prop="email"
            key="当前进度"
            sortable
            v-if="header_list[6].showTable"
          >
          </el-table-column>
          <el-table-column
            label="业务员"
            key="业务员"
            sortable
            v-if="header_list[7].showTable"
          ></el-table-column>
          <el-table-column label="操作" width="250px">
            <template #default="scope: any">
              <div
                class="flex_cc"
                style="column-gap: 20px"
                v-if="scope.row.is_manage"
              >
                <table_edit
                  :status="true"
                  :enable="scope.row.status"
                  :role="has_role_list"
                  @edit_item_status="
                    delete_list({
                      item: scope.row,
                      type: scope.row.status ? 2 : 1,
                    })
                  "
                  @edit_item="update_list(scope)"
                  @delete_item="delete_list({ item: scope.row, type: 0 })"
                ></table_edit>
                <el-tooltip
                  content="完成"
                  placement="bottom"
                  v-if="has_role_list[4].has_role"
                >
                  <svgBtn
                    icon="wancheng"
                    style="font-size: 20px"
                    color="#333"
                    @click="complate_list(scope.row)"
                  ></svgBtn>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="m_10_0 pagination"
          v-model:currentPage="page_data.current"
          v-model:page-size="page_data.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="list_debounce()"
          @current-change="list_debounce()"
        />
      </div>
    </div>
    <dialog_box
      @submit_delete="submit_delete"
      @submit_edit="submit_edit"
      @close="show_delete_box = false"
      :delete_name="delete_name"
      :show_delete_box="show_delete_box"
      :delete_box_status="delete_box_status"
    ></dialog_box>
  </div>
</template>

<script lang="ts" setup>
import { check_role, debounce } from '@/utils/check_role' // 权限校验
import search from '@/view/components/search.vue'
import dialog_box from '@/view/components/dialog_box.vue'
import table_edit from '@/view/components/table_edit.vue'
import setTable from '@/view/components/setTable.vue'
import { onMounted, ref, onUnmounted, nextTick } from 'vue'
import svgBtn from '@/components/svg_button.vue'
import axios from '@/service/HttpRequest'
import serviceApi from '@/service/api'
import EventBus from '@/utils/EventBus'
import { ElMessage } from 'element-plus'
import store from '@/store'
const has_role_list = ref([
  { path: 'project/status', has_role: false },
  { path: 'project/put', has_role: false },
  { path: 'project/delete', has_role: false },
  { path: 'project/post', has_role: false },
  { path: 'project/complete', has_role: false },
])
const list = ref()
const total = ref()
const max_height = ref()
nextTick(() => {
  max_height.value = window.innerHeight - 320 // 不带分页的 table 高度
})
const loading = ref(false)
const show_box = ref(false)
const height_size = ref(1)
const header_list = ref([
  {
    label: '项目名称',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '代号',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '设计单位',
    value: '',
    showTable: true,
    type: 'input',
    isShow: false,
    options: [],
  },
  {
    label: '建设单位',
    value: '',
    showTable: true,
    type: 'input',
    isShow: false,
    options: [],
  },
  {
    label: '施工单位',
    value: '',
    showTable: true,
    type: 'input',
    isShow: false,
    options: [],
  },
  {
    label: '项目状态',
    value: '',
    showTable: true,
    type: 'input',
    isShow: false,
    options: [],
  },
  {
    label: '当前进度',
    value: '',
    showTable: true,
    type: 'input',
    isShow: false,
    options: [],
  },

  {
    label: '业务员',
    value: '',
    showTable: true,
    type: 'select',
    isShow: false,
    options: [],
  },
])
const page_data = ref({
  current: 1,
  pageSize: 10,
  name: '',
  code: '',
  isDelete: 0,
})
const add_form_data = ref({})
onMounted(() => {
  console.log(123)
  has_role_list.value.forEach((item) => {
    item.has_role = check_role(item)
  })
  console.log(has_role_list.value)
  EventBus.on('refresh', () => {
    get_list()
    ElMessage.success('刷新成功！')
  })
  get_list()
})
onUnmounted(() => {
  EventBus.off('refresh')
})
const complate_list = (e) => {}
const show_delete_box = ref(false)
const delete_box_status = ref()
const delete_id = ref()
const delete_name = ref()
const submit_delete = () => {
  axios
    .request({
      url: serviceApi.role_crud + '/' + delete_id.value,
      method: 'delete',
    })
    .then((res) => {
      console.log(res)
      ElMessage.success('删除成功！')
      show_delete_box.value = false
      get_list()
    })
    .catch((error) => {
      show_delete_box.value = false
      ElMessage.error(error)
    })
}
const submit_edit = () => {
  axios
    .request({
      url:
        delete_box_status.value == 2
          ? serviceApi.role_disable + '/' + delete_id.value
          : serviceApi.role_enable + '/' + delete_id.value,
      method: 'put',
    })
    .then((res) => {
      console.log(res)
      ElMessage.success('操作成功！')
      show_delete_box.value = false
      get_list()
    })
    .catch((error) => {
      ElMessage.error(error)
      show_delete_box.value = false
    })
}
const delete_list = (e) => {
  console.log(e)
  delete_box_status.value = e.type
  show_delete_box.value = true
  delete_id.value = e.item.id
  delete_name.value = e.item.name
}
const update_list = (e) => {}
const get_list = () => {
  axios
    .request({
      url: serviceApi.enterprise_project_list,
      method: 'post',
      data: page_data.value,
    })
    .then((res) => {
      console.log(res)
      res.data.content.forEach((item) => {
        if (store.state.user_info.isAdmin) {
          item.is_manage = true
        } else {
          if (item.adminList.includes(store.state.user_info.id)) {
            item.is_manage = true
          } else {
            item.is_manage = false
          }
        }
      })
      list.value = res.data !== null ? res.data.content : []
      total.value =
        res.data !== null ? parseInt(res.data.totalElements) : total.value
    })
}
let list_debounce = debounce(200, get_list)
const search_key = () => {
  page_data.value = {
    current: 1,
    pageSize: 10,
    name: header_list.value[0].value,
    code: header_list.value[1].value,
    isDelete: 0,
  }
  get_list()
}
</script>

<style lang="scss" scoped></style>
